<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>菜品识别</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/jquery-1.11.1.min.js"></script>
</head>
<body>


<div class="container">
    <h2>基于人工智能的图像识别</h2>
    <div class="row">
        <div class="col-md-6">
            <p>上传喜欢的菜品图片</p>
            <form action="/upload" enctype="multipart/form-data" method="post">
                <input type="file" name="file"/>
                <br>
                <input type="submit" value="上传">
            </form>
            <p>点击图片开始识别</p>
            <p>
            <img src="{{url_for('static',filename='images/current.jpg',_t=val)}}" height="400" width="400"
                 alt="对不起,你没有图片~~"  id="detect" />
            </p>
            <button id="clear">清空识别结果</button>
        </div>

        <div class="col-md-6">
            <h4>识别结果</h4>
            <table border="1" id="output">
                <tr>
                    <th class="col-md-1">序号</th>
                    <th class="col-md-2">菜名</th>
                    <th class="col-md-3">说明</th>
                </tr>
                <tr>
                    <th>1</th>
                    <td>剁椒鱼头</td>
                    <td>剁椒鱼头(英文名：Chop bell pepper fish
                        head)是湖南省的传统名菜，属于湘菜系。据传，起源和清代文人黄宗宪有关。通常以鳙鱼鱼头、剁椒为主料，配以豉油、姜、葱、蒜等辅料蒸制而成。菜品色泽红亮、味浓、肉质细嫩。肥而不腻、口感软糯、鲜辣适口。2018年9月10日，“中国菜”正式发布，“剁椒鱼头“被评为“中国菜”湖南十大经典名菜。
                    </td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>双椒鱼头</td>
                    <td>
                        双椒鱼头是一道色香味俱全的名肴，属于湘菜系。双椒指的是青酱椒和红剁椒。鱼头洗净，腌制入味；炒锅旺火滑油，倒入洋葱末、蒜末等煸炒；煸炒出红油；调料涂抹在鱼头之上，上笼蒸。青红椒切菱形片放置在鱼头上，淋红油即成。口感香辣。
                    </td>
                </tr>

                <tr>
                    <th>3</th>
                    <td>鸦片鱼头</td>
                    <td>鸦片鱼头是一种菜肴的称呼。采用产于俄罗斯和中国交界地区，肉质鲜美，含油脂量较高，特别是鳍边和皮下含有丰富的胶质的鸦片鱼制作而成。</td>
                </tr>

            </table>
        </div>
    </div>
</div>

<script>
    // function do_img(){
    //     // myimg=document.getElementById("detect")
    //     console.log('你点击了图片')
    //     //向后台服务器发送请求
    // }

    //jquery初始化ready函数
    var mydata
    $(document).ready(function () { //传入匿名函数
        function clearTable(){
           for(var i=0;i<3;i++){
                // 找到表格id=output的对象中的行对象
                $('#output tr').eq(i+1).find('td').eq(0).text('')
                $('#output tr').eq(i+1).find('td').eq(1).text('')
            }
        }

        $('#clear').click(function () {
            clearTable()
        })

        $('#detect').click(function () { //这个匿名函数是事件处理函数
            console.log('你点击了图片!')
            clearTable()
            $.ajax({ //发起一个网络的异步请求
                url:'/vis', //发给后台的请求的url
                type:'GET', //GET请求
                contentType:'application/json',//返回的数据的是json格式的
                success:function (data) { //当点击图片请求成功后回调返回data数据
                    console.log(data)
                    mydata=data
                    for(var i=0;i<3;i++){
                        // console.log(data.result[i].name)
                        // console.log(data.result[i].baike_info.description)
                        // 找到表格id=output的对象中的行对象
                        $('#output tr').eq(i+1).find('td').eq(0).text(data.result[i].name)
                        //$('#output tr').eq(i+1).find('td').eq(1).text(data.result[i].baike_info.description)
                        $('#output tr').eq(i+1).find('td').eq(1).text(data.result[i].probability)

                    }
                }
            })
        }) // 找到img标签对应的jq对象设置点击事件处理

        clearTable() //清空表格内容

    })

</script>




</body>


</html>